import React from 'react'
import {connect} from 'react-redux'

import './Header.scss'
import {TABKEY} from '../config.js'
import {changeTab, getFilterData, changeFilter} from '../actions/headerAction.js'
import {getListData} from '../actions/contentListAction.js'

class Header extends React.Component {
  constructor(props){
    super(props)
    this.fetchData()
  }
  fetchData(){
    this.props.dispatch(getFilterData())
  }
  changeTab(key){
    // console.log(this.props.activeKey, key)
    let closePanel = false
    if(this.props.activeKey === key && !this.props.closePanel){
      closePanel = true
    }
    this.props.dispatch(changeTab({
      activeKey: key,
      closePanel
    }))
  }
  renderTabs(){
    let tabs = this.props.tabs
    let arr = []
    for(let key in tabs){
      let item = tabs[key]
      let cls = item.key + ' item'
      if(item.key === this.props.activeKey && !this.props.closePanel){
        cls += ' current'
      }
      arr.push(
        <div className={cls} key={item.key} onClick={() => this.changeTab(item.key)}>
          {item.text}
        </div>
      )
    }
    return arr
  }
  cancleActive(key, dataList){
    if(key === TABKEY.cate){
      for(let i = 0; i < dataList.length; i++){
        for(let j = 0; j < dataList[i].sub_category_list.length; j++){
          dataList[i].sub_category_list[j].active = false
        }
      }
    }else if(key === TABKEY.type){
      for(let x = 0; x < dataList.length; x++){
        dataList[x].active = false
      }
    }else if(key === TABKEY.filter){
      for(let k = 0; k < dataList.length; k++){
        for(let o = 0; o < dataList[k].items.length; o++){
          dataList[k].items[o].active = false
        }
      }
    }
  }
  changeDoFilter(item, key, dataList){
    this.cancleActive(key, dataList)
    item.active = true
    this.props.dispatch(changeFilter({
      item,
      key
    }))
    this.props.diapatch(getListData({
      fileterData: item,
      toFirstPage: true
    }))
  }
  renderCateContent(){
    let cateList = this.props.filterData.category_filter_list || []

    return cateList.map((item, index) => {
      return(
        <li className="cate-item" key={index}>
          <p className="item-title">
            {item.title}
            <span className="item-count">{item.quantity}</span>
          </p>
          <div className="item-content clearfix">
            {this.renderCateInnerContent(item, cateList)}
          </div>
        </li>
      )
    })
  }
  renderCateInnerContent(item, cateList){
    return item.sub_category_list.map((subItem, index) => {
      let cls = subItem.active ? 'cate-box-inner active' : 'cate-box-inner'
      return(
        <div className="cate-box" key={index} onClick={() => this.changeDoFilter(subItem, TABKEY.cate, cateList)}>
          <div className={cls}>
            {subItem.name}({subItem.quantity})
          </div>
        </div>
      )
    })
  }
  renderTypeContent(){
    let typeList = this.props.filterData.sort_type_list || []
    return typeList.map((subItem, index) => {
      let cls = subItem.active ? 'type-item active' : 'type-item'
      return(
        <li className={cls} key={index} onClick={() => this.changeDoFilter(item, TABKEY.type, typeList)}>
          {item.name}
        </li>
      )
    })
  }
  renderFilterContent(){
    let filterList = this.props.filterData.activity_filter_list || []
    return filterList.map((subItem, index) => {
      return (
        <li key={index} className="filter-item">
          <p className="filter-title">
            {subItem.title}
          </p>
          <div className="item-content clearfix">
            {this.renderFilterInnerContent(subItem.items, filterList)}
          </div>
        </li>
      )
    })
  }
  renderFilterInnerContent(levelItem, filterList){
    return levelItem.map((data, index) => {
      let cls = data.iocn ? 'cate-box-inner has-icon' : 'cate-box-inner'
      if(levelItem.active){
        cls += ' active'
      }
      return(
        <div onClick={() => this.changeDoFilter(levelItem, TABKEY.filter, filterList)} className="cate-box" key={index}>
          <div className={cls}>
            {item.icon ? <img src={item.icon} alt='' /> : null}{item.name}
          </div>
        </div>
      )
    })
  }
  renderPanel(){
    let tabs = this.props.tabs
    let arr = []
    for(let key in tabs){
      let item = tabs[key]
      let cls = item.key + '-panel'
      if(item.key === this.props.activeKey){
        cls += ' current'
      }
      if(item.key === TABKEY.cate){
        arr.push(
          <ul key={item.key} className={cls}>
            {this.renderCateContent()}
          </ul>
        )
      }else if(item.key === TABKEY.type){
        arr.push(
          <ul key={item.key} className={cls}>
            {this.renderTypeContent()}
          </ul>
        )
      }else if(item.key === TABKEY.filter){
        arr.push(
          <ul key={item.key} className={cls}>
            {this.renderFilterContent()}
          </ul>
        )
      }
    }
  }
  render() {
    let cls = 'panel'
    if(!this.props.closePanel){
      cls += ' show'
      console.log(cls)
    }else{
      cls = 'panel'
    }
    return ( 
      <div className='header'>
        <div className="header-top">
          {this.renderTabs()}
        </div>
        <div className="panel">
          <div className="panel-inner">
            {this.renderPanel()}
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({
    tabs: state.headerReducer.tabs,
    activeKey: state.headerReducer.activeKey,
    filterData: state.headerReducer.filterData,
    closePanel: state.headerReducer.closePanel
  })
)(Header)